<template>
	<view class="badge-item progress">
		<up-image
			src="https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=cycling%20rider%20badge%20icon%20achievement&image_size=square"
			width="60px" height="60px" shape="circle"></up-image>
		<view class="up-m-t-32 badge-name">初出茅庐</view>
		<view class="badge-description">完成第一次骑行活动</view>
		<view class="badge-tags-row">
			<view class="status-tag earned-tag">
				<view class="iconfont">&#xe646;</view>
				<view>已获得</view>
			</view>
			<view class="badge-rarity common">
				<view class="iconfont">&#xe654;</view>
				<view>普通</view>
			</view>
		</view>

		<view class="badge-date ">
			<view class="iconfont">&#xe602;</view>
			<view>2024年1月15日</view>
		</view>
		<view class="badge-rarity"></view>
	</view>
</template>

<script setup>

</script>

<style scoped lang="scss">
	.badge-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 16px;
		background: white;
		border-radius: 16px;
		padding: 24px;
		border: 1px solid rgba(148, 163, 184, 0.1);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
		cursor: pointer;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;

		&.progress {
			border-color: rgba(59, 130, 246, 0.3);
			background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.05));
			animation: progress-glow-d432c6d1 2s ease-in-out infinite alternate;
		}

		.badge-name {
			font-size: 16px;
			font-weight: 600;
			color: #1e293b;
			margin: 0 0 8px 0;
		}

		.badge-description {
			font-size: 12px;
			color: #64748b;
			margin: 0 0 16px 0;
			text-align: center;
			line-height: 1.5;
		}

		.badge-tags-row {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			flex-wrap: wrap;
			margin-bottom: 16px;

			.status-tag {
				display: inline-flex;
				align-items: center;
				gap: 4px;
				font-size: 11px;
				font-weight: 600;
				padding: 6px 10px;
				border-radius: 8px;
				text-transform: uppercase;
				letter-spacing: 0.3px;
				transition: all 0.3s ease;
				border: 1px solid transparent;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

				&.earned-tag {
					background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.15));
					color: #059669;
					border: 1px solid rgba(16, 185, 129, 0.3);
					animation: earned-glow-d432c6d1 2s ease-in-out infinite alternate;
				}
			}

			.badge-rarity {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 4px;
				font-size: 11px;
				font-weight: 600;
				padding: 6px 10px;
				border-radius: 8px;
				width: -moz-fit-content;
				width: fit-content;
				text-transform: uppercase;
				letter-spacing: 0.3px;
				transition: all 0.3s ease;
				border: 1px solid transparent;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

				&.common {
					background: linear-gradient(135deg, rgba(148, 163, 184, 0.12), rgba(100, 116, 139, 0.12));
					color: #64748b;
					border: 1px solid rgba(148, 163, 184, 0.25);
				}
			}
		}



		.badge-date {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 6px;
			font-size: 12px;
			color: #10b981;
			// margin-bottom: 8px;
		}


	}
</style>